<template>
  <div class="page-content">
    <div class="page-title">企业列表</div>
    <div class="content-box">
      <div class="search">
        <div class="search-line big-name clearfix">
          <div class="fl clearfix input-box">
            <span class="name fl">登录手机号码：</span>
            <input class="fl" type="text" placeholder="请输入" v-model="searchParams.userPhone" />
          </div>
          <div class="fl clearfix input-box">
            <span class="name fl">企业编号：</span>
            <input class="fl" type="text" placeholder="请输入" v-model="searchParams.code" />
          </div>
          <div class="fl clearfix input-box" style="margin-left: 30px;">
            <span class="name fl">企业名称：</span>
            <input class="fl" type="text" placeholder="请输入" v-model="searchParams.name" />
          </div>
          <div class="fl">
            <div class="btn check-btn" @click="searchAll">查询</div>
          </div>
        </div>
        <div class="search-line big-name clearfix">
          <div class="fl clearfix input-box">
            <span class="name fl">统一信用代码：</span>
            <input class="fl" type="text" placeholder="请输入" v-model="searchParams.creditCode" />
          </div>
        </div>
        <div class="search-line big-name clearfix">
          <div class="fl clearfix input-box">
            <span class="name fl">状态：</span>
            <a-select default-value="请选择" :value="searchParams.status" @change="selectState">
              <a-select-option :value="item.value" v-for="item in stateRz" :key="item.value">{{
                item.text
              }}</a-select-option>
            </a-select>
          </div>
          <div class="fl clearfix input-box">
            <span class="name fl">企业性质：</span>
            <a-select default-value="请选择" :value="searchParams.proper" @change="selectType">
              <a-select-option :value="item.value" v-for="item in companyPropers" :key="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </div>
        </div>
      </div>
      <div class="tabel">
        <a-table
          :columns="columns"
          :data-source="data"
          rowKey="userPhone"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <span slot="status" slot-scope="record">
            <span class="state no-auth" v-if="record.status == 0">未认证</span>
            <span class="state ing-auth" v-if="record.status == 1">待认证</span>
            <span class="state end-auth" v-if="record.status == 2">已认证</span>
            <span class="state fail-auth" v-if="record.status == 3">认证失败</span>
          </span>
          <!-- slot-scope="text, record" -->
          <span slot="handler" slot-scope="record">
            <a
              class="handler-item"
              href="javascript:void(0);"
              v-if="record.status == 1 || record.status == 3"
              @click="statusSet(record, 1)"
              >认证</a
            >
            <a
              class="handler-item"
              v-if="record.status == 2"
              href="javascript:void(0);"
              @click="statusSet(record, 2)"
              >编辑</a
            >
            <a class="handler-item" href="javascript:void(0);" @click="reSetPsw(record.uid)"
              >重置密码</a
            >
          </span>
        </a-table>
      </div>
    </div>
    <a-modal v-model="visibleModel" destroyOnClose :width="720" :title="modelTitle" @ok="editOk">
      <div class="info">
        <div class="title">基本信息</div>
        <div class="info-detail">
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业名称: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.name" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>社会统一信用代码: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.creditCode" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业性质: </span>
            </div>
            <div class="word fl">
              <a-select :defaultValue="editRecord.proper" @change="editChangeProper">
                <a-select-option
                  :value="item.value"
                  v-for="item in companyPropers"
                  :key="item.text"
                >
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业规模: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.peopleCnt" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业地址: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.address" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>营业执照扫描件: </span>
            </div>
            <div class="word clearfix fl">
              <img
                class="fl"
                v-if="uploadImageUrl || editRecord.licenseImage"
                :src="uploadImageUrl || editRecord.licenseImage"
                alt="file"
              />
              <a-upload
                name="file"
                list-type="picture-card"
                class="avatar-uploader  fl"
                :show-upload-list="false"
                :action="actionUrl"
                :before-upload="beforeUpload"
                @change="handleChange"
                style="width: 104px;height: 104px;"
              >
                <div>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">
                    上传
                  </div>
                </div>
              </a-upload>
              <!-- <img :src="editRecord.licenseImage" alt="" /> -->
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业法人姓名: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.legalPerson" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>法人身份证: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                maxlength="18"
                v-model="editRecord.legalIdCardNo"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <!-- <span class="dot">*</span> -->
              <span>企业介绍: </span>
            </div>
            <div class="word fl">
              <textarea
                placeholder="请输入"
                maxlength="300"
                name=""
                id=""
                v-model="editRecord.intro"
              ></textarea>
              <div class="num">0 / 300</div>
            </div>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="title">联系人信息</div>
        <div class="info-detail">
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>联系人姓名: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.contactName" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>联系人手机号: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                maxlength="11"
                placeholder="请输入"
                v-model="editRecord.contactPhone"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>联系人职务: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.contactJob" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="title">认证信息</div>
        <div class="info-detail">
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>企业编号: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.code" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>对外展示名称: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                maxlength="11"
                v-model="editRecord.outerName"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix" v-if="handlerType == 1">
            <div class="front fl">
              <span class="dot">*</span>
              <span>认证结果: </span>
            </div>
            <div class="word fl">
              <a-radio-group
                :defaultValue="editRecordStatus"
                :options="statusRz"
                @change="radioChange"
              />
            </div>
          </div>
          <div class="info-item clearfix" v-if="handlerType == 1 && editRecordStatus == 3">
            <div class="front fl">
              <span class="dot">*</span>
              <span>不通过原因: </span>
            </div>
            <div class="word fl">
              <input type="text" maxlength="11" v-model="editRecordUnStatus" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'center'
  },
  {
    title: '企业编号',
    dataIndex: 'code',
    key: 'code',
    align: 'center'
  },
  {
    title: '登录手机号码',
    dataIndex: 'userPhone',
    key: 'userPhone',
    align: 'center'
  },
  {
    title: '状态',
    // dataIndex: "state",
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '企业名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center'
  },
  {
    title: '统一信用代码',
    dataIndex: 'creditCode',
    key: 'creditCode',
    align: 'center'
  },
  {
    title: '企业性质',
    dataIndex: 'properDes',
    key: 'properDes',
    align: 'center'
  },
  {
    title: '企业规模',
    dataIndex: 'peopleCnt',
    key: 'peopleCnt',
    align: 'center'
  },
  {
    title: '岗位数量',
    dataIndex: 'jobCnt',
    key: 'jobCnt',
    align: 'center'
  },
  {
    title: '操作',
    // key: "handler",
    align: 'center',
    scopedSlots: { customRender: 'handler' }
  }
]
export default {
  data() {
    return {
      data: [],
      loading: false,
      uploadImageUrl: '',
      modelTitle: '',
      columns,
      companyId: '',
      handlerType: '',
      imageUrl: '',
      visibleModel: false,
      editRecordStatus: 2, //默认认证通过
      editRecordUnStatus: '', //认证不通过原因
      actionUrl: process.env.VUE_APP_API_BASE_URL + '/images',
      stateRz: [
        { text: '请选择', value: '' },
        { text: '未认证', value: 0 },
        { text: '待认证', value: 1 },
        { text: '认证成功', value: 2 },
        { text: '认证失败', value: 3 }
      ],
      statusRz: [
        { label: '认证通过', value: 2 },
        { label: '认证不通过', value: 3 }
      ],
      companyPropers: [],
      pagination: {
        showQuickJumper: true,
        total: 1,
        current: 1,
        pageSize: this.$config.pageSize,
        showTotal: (total, range) =>
          `共 ${total} 条记录 第${Math.ceil(range[0] / this.pagination.pageSize)} / ${Math.ceil(
            total / this.pagination.pageSize
          )} 页`
      },
      searchParams: {
        code: '',
        creditCode: '',
        name: '',
        proper: '',
        status: '',
        userPhone: '',
        pageNo: 1,
        pageSize: this.$config.pageSize
      },
      editRecord: {}
    }
  },
  watch: {
    '$route.path': function(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init()
      }
    }
  },
  mounted() {
    this.init()
    // 获取企业性质
    this.$http.get('/commons/company-propers', { params: { isLimit: false } }).then((res) => {
      if (res.success) {
        this.companyPropers = res.model.companyPropers
        this.companyPropers.unshift({
          text: '请选择',
          value: ''
        })
      }
    })
  },
  methods: {
    init() {
      this.searchParams.code = ''
      this.searchParams.creditCode = ''
      this.searchParams.name = ''
      this.searchParams.proper = ''
      this.searchParams.status = ''
      this.searchParams.userPhone = ''
      this.searchParams.pageNo = ''
      this.searchParams.pageSize = this.$config.pageSize
      this.getList()
    },
    getList() {
      this.$http.get('/platforms/companies', { params: this.searchParams }).then((res) => {
        if (res.success) {
          this.pagination.current = res.model.pageNo
          this.pagination.total = res.model.totalCount
          this.data = res.model.data.map((item, index) => {
            item.no = index + 1
            return item
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          this.uploadImageUrl = info.file.response.model
          this.editRecord.licenseImage = info.file.response.model
          this.loading = false
        } else {
          this.$message.error(info.file.response.message)
        }
      }
      this.loading = false
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('图片格式错误!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片不能超过2M!')
      }
      return isJpgOrPng && isLt2M
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.searchParams.pageNo = pagination.current
      this.getList()
    },
    selectState(value) {
      this.searchParams.status = value
      this.searchParams.pageNo = 1
      this.getList()
    },
    selectType(value) {
      this.searchParams.proper = value
      this.searchParams.pageNo = 1
      this.getList()
    },
    searchAll() {
      this.searchParams.pageNo = 1
      this.getList()
    },
    reSetPsw(uid) {
      const self = this
      this.$confirm({
        title: '提示',
        content: '确认将密码重置为111111？',
        onOk: () => {
          self.$http.put('/platforms/users/' + uid + '/passwords?password=111111').then((res) => {
            if (res.success) {
              this.$message.success('重置成功')
            } else {
              this.$message.error('重置失败')
            }
          })
        }
      })
    },
    editChangeProper(value) {
      this.editRecord.proper = value
    },
    statusSet(editRecord, type) {
      // 1,认证，2，编辑
      if (type === 1) {
        this.modelTitle = '企业认证'
      }
      if (type === 2) {
        this.modelTitle = '编辑企业'
      }
      this.$http.get('/platforms/companies/' + editRecord.id).then((res) => {
        if (res.success) {
          this.editRecord.address = res.model.address
          this.editRecord.code = res.model.code
          this.editRecord.contactJob = res.model.contactJob
          this.editRecord.contactName = res.model.contactName
          this.editRecord.contactPhone = res.model.contactPhone
          this.editRecord.creditCode = res.model.creditCode
          this.editRecord.intro = res.model.intro
          this.editRecord.legalIdCardNo = res.model.legalIdCardNo
          this.editRecord.legalPerson = res.model.legalPerson
          this.editRecord.licenseImage = res.model.licenseImage
          this.editRecord.name = res.model.name
          this.editRecord.outerName = res.model.outerName
          this.editRecord.peopleCnt = res.model.peopleCnt
          this.editRecord.proper = res.model.proper
          this.companyId = res.model.id
          this.handlerType = type
          this.visibleModel = true
          this.getList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    radioChange(res) {
      this.editRecordStatus = res.target.value
    },
    editOk() {
      if (this.handlerType === 1) {
        let params = Object.assign(this.editRecord, {
          status: this.editRecordStatus,
          reviewRemark: this.editRecordUnStatus
        })
        this.$http.put('/platforms/companies/' + this.companyId, params).then((res) => {
          if (res.success) {
            this.getList()
            this.visibleModel = false
          } else {
            this.$message.error(res.message)
          }
        })
      }
      if (this.handlerType === 2) {
        this.$http
          .put('/platforms/companies/edit/' + this.companyId, this.editRecord)
          .then((res) => {
            if (res.success) {
              this.getList()
              this.visibleModel = false
              this.$message.success('编辑保存成功')
            } else {
              this.$message.error(res.message)
            }
          })
      }
    }
  }
}
</script>

<style lang="less"></style>
